<template>
	<div>
		<el-card class="box-card">
			<div class="text item">
				所属项目： {{projectName}}
			</div>
		</el-card>
		<el-divider />

		<el-form ref="project" :model="advForm" label-position="top" :rules="advFormRules"
			:validate-on-rule-change="false">
			<el-card class="box-card">
				<el-form-item label="广告名称" label-width="140px" prop="name">
					<el-input v-model="advForm.name" style="width: 50%;" />
				</el-form-item>
				<el-form-item label="预算" label-width="140px" prop="budget">
					<el-input v-model="advForm.budget" style="width: 50%;" />
				</el-form-item>
				<el-form-item label="出价" label-width="140px" prop="cpa_bid" style="width: 83%;">
					<el-input v-model="advForm.bid" style="width: 50%;" />
					<el-button type="primary" @click="openBidSuggest">建议出价</el-button>
				</el-form-item>
				<el-form-item label="来源" label-width="140px" prop="source">
					<el-input v-model="advForm.source" style="width: 50%;" />
				</el-form-item>
				<el-form-item label="广告评论" label-width="140px" prop="is_comment_disable">
					<el-radio-group v-model="advForm.is_comment_disable" style="width: 50%;">
						<el-radio-button v-for="item in operation_list" :key="item.value" :label="item.value"
							:disabled="item.disabled">
							{{ item.label }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="品牌名称" label-width="140px">
					<el-select v-model="selectedBrand" @change="brandSelectChange" style="width: 40%;"
						:clearable="true">
						<el-option v-for="brand in brand_list" :key="brand.cdp_brand_id" :label="brand.cdp_brand_name"
							:value="brand" />
					</el-select>
				</el-form-item>

				<el-form-item label="行动号召" label-width="140px">
					<el-input v-model="inputText" style="width: 40%;" placeholder="最多10个行动号召，每个2-4个字，可空格分隔"
						@keyup.enter="handleEnter"></el-input>
					<el-button type="primary" @click="handleEnter">添加</el-button>
				</el-form-item>
				<el-form-item>
					<p>已选（{{ advForm.promotion_materials.call_to_action_buttons.length }}/10）</p>
					<ul>
						<li v-for="(item, index) in advForm.promotion_materials.call_to_action_buttons" :key="index">
							{{ item }} <el-button type="text" @click="removeItem(index)">X</el-button>
						</li>
					</ul>
				</el-form-item>
				<el-form-item label="智能生成" label-width="140px" prop="intelligent_generation">
					<el-radio-group v-model="advForm.promotion_materials.intelligent_generation" style="width: 50%;">
						<el-radio-button v-for="item in generation_list" :key="item.value" :label="item.value">
							{{ item.label }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>


				<el-form-item label="抖音号" label-width="140px" prop="aweme_id">
					<el-select v-model="advForm.native_setting.aweme_id" style="width: 40%;" :clearable="true">
						<el-option v-for="(item,index) in aweme_list" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="原生锚点" label-width="140px" prop="anchor_related_type">
					<el-radio-group v-model="advForm.native_setting.anchor_related_type" style="width: 50%;">
						<el-radio-button v-for="item in anchor_related_type_list" :key="item.value" :label="item.value">
							{{ item.label }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="小程序链接" label-width="140px" prop="open_url">
					<el-input v-model="advForm.promotion_materials.open_url" style="width: 50%;" />
					<el-button type="primary" @click="openGameDialog">选择已有</el-button>
				</el-form-item>
				<el-form-item label="备用网页链接" label-width="140px" prop="ulink">
					<el-select v-model="advForm.promotion_materials.ulink" style="width: 40%;" :clearable="true">
						<el-option v-for="(item,index) in site_list" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="图片" label-width="140px" prop="ulink">
					<CreateMaterialList @receive="onReceiveImage" :extensions="extensions" />
				</el-form-item>
				<el-form-item label="视频" label-width="140px" prop="ulink">
					<CreateVideoList @receive="onReceiveVideo" :extensions="extensions" />
				</el-form-item>
				<el-divider />
			</el-card>
		</el-form>



		<el-dialog v-model="dialogGameVisible" :before-close="closeGameDialog" title="选择已有小程序链接">
			<el-table :data="game_list" style="width: 100%">
				<el-table-column prop="instance_id" label="小程序资产id" width="400"></el-table-column>
				<el-table-column prop="name" label="小程序名称" width="400"></el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="primary" @click="selectGame(scope.row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog v-model="dialogBidSuggestVisible" :before-close="closeBidSuggest" title="建议出价" width="400px">
			<p>根据您近7天的素材质量评估结果，建议出价如下:</p>
			<el-row class="suggest-row">
				<el-col :span="12" class="suggest-text">竞争力超过 90% 的计划</el-col>
				<el-col :span="6" class="suggest-price">{{ suggestInfo.bid_high_90 }} 元</el-col>
				<el-col :span="4" class="suggest-action">
					<el-button type="text" @click="adoptSuggestion(suggestInfo.bid_high_90)">采纳</el-button>
				</el-col>
			</el-row>
			<el-row class="suggest-row">
				<el-col :span="12" class="suggest-text">竞争力超过 50% 的计划</el-col>
				<el-col :span="6" class="suggest-price">{{ suggestInfo.bid_high_50 }} 元</el-col>
				<el-col :span="4" class="suggest-action">
					<el-button type="text" @click="adoptSuggestion(suggestInfo.bid_high_50)">采纳</el-button>
				</el-col>
			</el-row>
			<el-row class="suggest-row">
				<el-col :span="12" class="suggest-text">竞争力超过 30% 的计划</el-col>
				<el-col :span="6" class="suggest-price">{{ suggestInfo.bid_high_30 }} 元</el-col>
				<el-col :span="4" class="suggest-action">
					<el-button type="text" @click="adoptSuggestion(suggestInfo.bid_high_30)">采纳</el-button>
				</el-col>
			</el-row>
		</el-dialog>
	</div>


</template>
<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { getHugeInfo } from '@/api/qmAccessTokens'
	import JSONBIG from 'json-bigint'
	import { useUserStore } from '@/pinia/modules/user'
	import CustomPic from '@/components/customPic/index.vue'
	import { getQmGameListList } from '@/api/qmGameList'
	import { RuleTester } from 'eslint'
	import { setConfig, CreateMaterialList, CreateVideoList } from '@bytedance-ad/mui-vue3'


	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const useRoutes = useRoute()
	//const advertiser_id = useRoutes.query.advertiser_id
	//const project_id = useRoutes.query.project_id
	const delivery_mode = useRoutes.query.delivery_mode

	const advertiser_id = 1789386848796747
	const project_id = "7408064602771275803"

	const projectName = ref('项目1')

	const extensions = ref({
		max: 10,
	})
	const onReceiveImage = (value) => {
		// 选中的素材图片
		console.log(value)
	};
	const onReceiveVideo = (value) => {
		// 选中的素材视频
		console.log(value)
	};
	setConfig({
		appId: '1806716056834058', // 必填，否则无法使用MUI, 可在后台管理系统https://open.oceanengine.com/developer/admin/ad_list获取
		host: 'http://localhost:8080/api',
		params: { // 可选，自定义每次请求的参数
			advertiser_id: advertiser_id,
		},
		apis: {
			getImages: '/openApi/file/image/get/', //获取图片
			uploadImage: '/openApi/file/image/ad/', //上传图片
			getVideos: '/openApi/file/video/get/',  //获取视频 
			uploadVideo: '/openApi/file/video/ad/', //上传视频
			getAudio: '/openApi/file/audio/get/',  //获取音频  
			uploadAudio: '/openApi/file/audio/ad/', //上传音频
			getCarousel: '/openApi/carousel/list/',//获取图文素材
			uploadCarousel: '/openApi/carousel/create/',//上传图文
		}
	})


	const advFormRules = ref({
		name: [
			{ required: true, message: '请输入广告名称', trigger: 'blur' }
		]
	})

	const anchor_related_type_list = reactive([
		{
			value: 'AUTO',
			label: '自动生成'
		},
		{
			value: 'OFF',
			label: '不启用',
		},
	])

	const generation_list = reactive([
		{
			value: 'ON',
			label: '开启'
		},
		{
			value: 'OFF',
			label: '关闭',
		},
	])

	const operation_list = reactive([
		{
			value: 'ENABLE',
			label: '开启',
			disabled: false
		},
		{
			value: 'DISABLE',
			label: '关闭',
			disabled: false
		},
	])

	const advForm = ref({
		"advertiser_id": advertiser_id,
		"project_id": project_id,
		"name": "",
		"operation": "ENABLE",
		"promotion_materials": {
			"video_material_list": [
				{
					"image_mode": "CREATIVE_IMAGE_MODE_CALIBRATION_FREE_VIDEO",
					"video_id": "",
					"video_cover_id": "",
					"item_id": 0,
					"video_template_type": "DPA_VIDEO_TEMPLATE_CUSTOM",
					"video_task_ids": [
						""
					],
					"guide_video_id": "",
					"video_hp_visibility": "ALWAYS_VISIBLE"
				}
			],
			"image_material_list": [
				{
					"image_mode": "CREATIVE_IMAGE_MODE_CALIBRATION_FREE_SINGLE_IMAGE",
					"images": [
						{
							"image_id": "",
							"template_id": 0,
							"template_data_list": [
								{
									"background_image_id": ""
								}
							]
						}
					]
				}
			],
			"origin_video_title": "OFF",
			"title_material_list": [
				{
					"title": "",
					"word_list": [
						0
					],
					"bidword_list": [
						{
							"default_word": ""
						}
					],
					"dpa_word_list": [
						0
					]
				}
			],
			"text_abstract_list": [
				{
					"abstract_text": "",
					"bidword_list": [
						{
							"default_word": ""
						}
					],
					"word_list": [
						0
					]
				}
			],
			"params_type": "CUSTOM",
			"external_url_field": "",
			"external_url_material_list": [
				""
			],
			"external_url_params": "",
			"web_url_material_list": [
				""
			],
			"playable_url_material_list": [
				""
			],
			"product_info": {
				"titles": [
					""
				],
				"image_ids": [
					""
				],
				"selling_points": [
					""
				],
				"product_name_type": "CUSTOM",
				"product_image_type": "CUSTOM",
				"product_selling_point_type": "CUSTOM",
				"product_name_fields": [
					""
				],
				"product_image_fields": [
					""
				],
				"product_selling_point_fields": [
					""
				]
			},
			"call_to_action_buttons": [
			],
			"component_material_list": [
				{
					"component_id": 0
				}
			],
			"anchor_material_list": [
				{
					"anchor_type": "APP_GAME",
					"anchor_id": ""
				}
			],
			"mini_program_info": {
				"app_id": "",
				"start_path": "",
				"params": "",
				"url": "",
				"urls": [
					""
				],
				"auto": [
					{
						"app_id": "",
						"start_path": "",
						"params": ""
					}
				]
			},
			"carousel_material_list": [
				{
					"carousel_id": "",
					"video_hp_visibility": "ALWAYS_VISIBLE"
				}
			],
			"open_url": "",
			"open_urls": [
				""
			],
			"open_url_type": "CUSTOM",
			"open_url_field": "",
			"open_url_params": "",
			"ulink": "",
			"dynamic_creative_switch": "OFF",
			"advanced_dc_settings": [
				"OPTIMIZE_LANDING_PAGE"
			],
			"intelligent_generation": "OFF",
			"decoration_material": {
				"activity_id": "",
				"image_mode": "CREATIVE_IMAGE_MODE_DECORATION_COUPON"
			},
			"blue_flow_material_recommend": "OFF"
		},
		"native_setting": {
			"aweme_setting_type": "SINGLE",
			"aweme_id": "",
			"aweme_ids": [],
			"anchor_related_type": "OFF"
		},
		"budget_mode": "BUDGET_MODE_TOTAL",
		"budget": "",
		"bid": "",
		"cpa_bid": "",
		"source": "",
		"is_comment_disable": "",
		"brand_info": {
			"yuntu_category_id": 0,
			"cdp_brand_id": 0,
			"ecom_brand_id": 0,
			"brand_name_id": 0,
			"cdp_brand_name": "",
		}
	})


	//抖音号
	const aweme_list = ref([])
	const getAwemeList = () => {
		const params = {
			advertiserId: advertiser_id,
			platformId: 1
		}
		getHugeInfo({ type: 'getAwemeList', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				aweme_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				arr.forEach(item => {
					aweme_list.value.push({
						value: item.aweme_id,
						label: item.aweme_name
					})
				})
			}
		})
	}
	getAwemeList()

	// 获取已有小程序链接
	const dialogGameVisible = ref(false)
	// 游戏列表
	const game_list = ref([])
	const getGameList = () => {
		const params = {
			advertiserId: advertiser_id,
			platformId: 1
		}
		getHugeInfo({ type: 'getGames', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				game_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				arr.forEach(item => {
					game_list.value.push({
						instance_id: item.instance_id,
						name: item.name
					})
				})
			}
		})
	}
	// 游戏详情
	const getGameDetail = (instanceId) => {
		const params = {
			advertiserId: advertiser_id,
			platformId: 1,
			instanceId: instanceId,
		}
		getHugeInfo({ type: 'getGameDetail', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				const arr = JSONBIG.parse(res.data.info)
				var link = arr[0].link
				alert(link)
				//写入 小程序链接中
			}
		})
	}
	const openGameDialog = () => {
		dialogGameVisible.value = true
		getGameList()
		//console.log(game_list)
	}
	const selectGame = (row) => {
		dialogGameVisible.value = false;
		getGameDetail(row.instance_id)

	}
	const closeGameDialog = () => {
		dialogGameVisible.value = false
	}

	// 获取橙子建站站点列表
	// 备用网页链接
	const site_list = ref([])
	const getSiteList = () => {
		const params = {
			advertiserId: advertiser_id,
			platformId: 1
		}
		getHugeInfo({ type: 'getSiteList', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				site_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				arr.forEach(item => {
					site_list.value.push({
						value: item.link,
						label: item.name,
					})
				})
			}
		})
	}

	getSiteList()



	// 建议出价
	const dialogBidSuggestVisible = ref(false)
	const openBidSuggest = () => {
		dialogBidSuggestVisible.value = true
	}
	const closeBidSuggest = () => {
		dialogBidSuggestVisible.value = false
	}
	const useSuggestion = (price) => {
		console.log(price)
	}
	// 查询建议出价
	const suggestInfo = {
		bid_high_30: 0,
		bid_high_50: 0,
		bid_high_90: 0
	}
	const getBidsSuggest = () => {
		const params = {
			advertiserId: advertiser_id,
			projectId: project_id,
			platformId: 1,
			pricing: "PRICING_OCPM",
			externalAction: "AD_CONVERT_TYPE_GAME_ADDICTION",
		}
		getHugeInfo({ type: 'getBidsSuggest', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				const arr = JSONBIG.parse(res.data.info)
				suggestInfo.bid_high_30 = arr.bid_high_30
				suggestInfo.bid_high_50 = arr.bid_high_50
				suggestInfo.bid_high_90 = arr.bid_high_90
			}
		})
	}
	getBidsSuggest()



	// 获取品牌信息
	const brand_list = ref([])
	const getBrandList = () => {
		const params = {
			advertiserId: advertiser_id,
			platformId: 1,
		}
		getHugeInfo({ type: 'getBrandList', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				brand_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				arr.forEach(item => {
					brand_list.value.push({
						cdp_brand_name: item.cdp_brand_name,
						cdp_brand_id: item.cdp_brand_id,
						brand_name_id: item.brand_name_id,
						ecom_brand_id: item.ecom_brand_id,
					})
				})
			}
		})
	}
	getBrandList()

	const selectedBrand = ref(null);
	const brandSelectChange = () => {
		if (selectedBrand.value) {
			advForm.value.brand_info = {
				yuntu_category_id: 0,
				cdp_brand_id: selectedBrand.value.cdp_brand_id,
				ecom_brand_id: selectedBrand.value.ecom_brand_id,
				brand_name_id: selectedBrand.value.brand_name_id,
				cdp_brand_name: selectedBrand.value.cdp_brand_name,
			};
		}
	}

	// 查询推广卡片推荐内容
	// 产品卖点 textType: "PROMOTION",
	const promotion_list = ref([])
	const getPromotionList = () => {
		const params = {
			advertiserId: advertiser_id,
			textType: "PROMOTION",
			platformId: 1,
		}
		getHugeInfo({ type: 'getPromotionList', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				promotion_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				promotion_list.value = arr.list
				console.log(promotion_list)
			}
		})
	}
	getPromotionList()

	//行动号召字段内容获取
	const action_list = ref([])
	const getActionList = () => {
		const params = {
			advertiserId: advertiser_id,
			landingType: "APP",
			platformId: 1,
		}
		getHugeInfo({ type: 'getActionList', params: JSON.stringify(params) }).then(res => {
			if (res.code == 0) {
				action_list.value = []
				const arr = JSONBIG.parse(res.data.info)
				action_list.value = arr.list
				console.log(action_list)
			}
		})
	}
	getActionList()


	const inputText = ref('');
	const handleEnter = () => {
		const text = inputText.value.trim();
		if (text.length >= 2 && text.length <= 4 && advForm.value.promotion_materials.call_to_action_buttons.length < 10) {
			advForm.value.promotion_materials.call_to_action_buttons.push(text);
			inputText.value = '';
		}
	};
	const removeItem = (index) => {
		advForm.value.promotion_materials.call_to_action_buttons.splice(index, 1);
	};
</script>

<style scoped>
	.suggest-row {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.suggest-text {
		text-align: left;
	}

	.suggest-price {
		text-align: right;
	}

	.suggest-action {
		text-align: center;
	}
</style>